<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>CSS Test: Auto Width for Replaced Element with Intrinsic Ratio Only</title>
  <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>
  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"/>
  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"/>
  <meta name="flags" content="svg"/>
  <style type="text/css">
   body { width: 500px; border: 1px silver dashed; }
   table, p { border-spacing: 0; border-collapse: collapse; }
   td { display: table-cell; }
   object, #p3 { border: solid blue 4px; }
   object { background: red; }
   #p2 { display: table; }
   #img2 { display: block; }
   #p3 { border: thick blue 4px; width: 300px; }
   #p4 { float: left; }
  </style>
 </head>
 <body>
  <p>The following four blue boxes should be of the same width. There should be no red.</p>
  <table><tr><td><object id="img1" type="image/svg+xml" data="support/intrinsic-ratio.svg">This test won't work because you do not have images enabled.</object></td></tr></table>
  <p id="p2"><object id="img2" type="image/svg+xml" data="support/intrinsic-ratio.svg">This test won't work because you do not have images enabled.</object></p>
  <p id="p3"></p>
  <p id="p4"><object id="img4" type="image/svg+xml" data="support/intrinsic-ratio.svg">This test won't work because you do not have images enabled.</object></p>
 </body>
</html>
